<template>
    <div class="grid-content ep-bg-purple app-container">
        <el-card class="box-card">
            <!-- 个人中心标题 -->
            <template #header>
            <div class="card-header">
                <span class="card-title">个人中心</span>
            </div>
            </template>
            <!-- 头像和修改头像按钮居中 -->
            <div class="avatar-container">
            <!-- 头像 -->
            <div class="avatar-wrap">
                <el-avatar size="large" :src="computedAvatarUrl" />
            </div>
            <!-- 修改头像按钮 -->
            <div class="change-avatar-btn">
                <el-button size="small" class="changeAvaterB" @click="openAvaterDialog">修改头像</el-button>
            </div>
            </div>
            <!-- 显示用户信息 -->
            <div v-if="userInfo" class="user-info">
                <div class="info-item">
                    <span class="label">用户名:</span>
                    <span class="value">{{ userInfo.username }}</span>
                </div>
                <div class="info-item">
                    <span class="label">邮箱:</span>
                    <span class="value">{{ userInfo.email }}</span>
                </div>
                <div class="info-item">
                    <span class="label">电话:</span>
                    <span class="value">{{ userInfo.phonenumber }}</span>
                </div>
                <div class="info-item">
                    <span class="label">登录时间:</span>
                    <span class="value">{{ userInfo.login_date }}</span>
                </div>
                <div class="info-item">
                    <span class="label">备注:</span>
                    <span class="value">{{ userInfo.remark }}</span>
                </div>
            </div>
        </el-card>
    </div>
    <div class="openAvater"><Avatar :dialogAvatarVisible="showAvaterDialog" @update:dialogAvatarVisible="handleCustomEvent"></Avatar></div>
  </template>
  
  <script setup>
    import circleUrl from '@/assets/images/default_avater.png'
    import { BASE_URL } from '@/config';
    import { defineProps , computed ,ref} from 'vue';
    import Avatar from './avatar.vue';

    const props  = defineProps({
        userInfo:{
            type:Object,
            required:true,
            default: () => ({}), // 给默认值一个空对象
        }
    })

    // 计算头像 URL
    const computedAvatarUrl = computed(() => {
        // 如果 userInfo 存在且 avatar_url 不为空，则拼接 baseURL
        if (props.userInfo && props.userInfo.avatar_url) {
        return `${BASE_URL}${props.userInfo.avatar_url}`;
        } else {
        // 否则使用默认头像
        return circleUrl;
        }
    });
    const showAvaterDialog = ref(false)
    const openAvaterDialog = () => {
        showAvaterDialog.value=true
    }

    const handleCustomEvent = (data) => {
        // 接收到子组件传来的数据后，更新父组件的状态
        showAvaterDialog.value = data
    }
  </script>
  
  <style scoped>
.app-container {
  width: 100%;
  height: 100%; 
  flex: 1;
  display: flex;
}

.grid-content {
  width: 100%;
  height: 100%; /* 设置为100%使其占满父容器的高度 */
}
.box-card{
    height: 76vh;
    display: flex;
    flex-direction: column; /* 使其内容可以垂直排列 */
}
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-title {
    font-size: 20px;
    font-weight: bold;
    color: #000000;
    text-align: center;
    width: 100vh;
  }
  
  /* 头像和修改头像按钮的容器 */
  .avatar-container {
    text-align: center;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  
  /* 头像 */
  .avatar-wrap {
    margin-bottom: 10px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
  }
  
  .no-avatar {
    font-size: 14px;
    color: #999;
    font-style: italic;
  }
  
  /* 修改头像按钮 */
  .change-avatar-btn {
    margin-top: 10px;
  }
  
  .changeAvaterB {
    background-color: #08b8be;
    color: white;
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 14px;
  }
  
  .user-info {
    margin-top: 40px;
    height: 100%;
  }
  
  .text {
    font-size: 18px;
    text-align: right;
    color: #333;
  }
  
  .info-item {
        display: flex;
        justify-content: space-between;
        align-items: center; /* 垂直居中 */
        margin-bottom: 20px;
        width: 400px;
    }

  .label {
        font-size: 16px;
        text-align: right;
        width: 160px;
    }

  .value {
        font-size: 16px;
        margin-left: 20px;
        text-align: left;
        width:240px;
    }

  </style>
  